<template>
  <div class="FlowSheet">
    <div class="top">
      <p class="top_title">{{ title }}</p>
      <img id="top_img" src="@/assets/index/sx.png" alt="" class="top_img" @click="newList()" @mouseover="handleMouseOver">
    </div>
    <div class="main">
      <div class="main_top">
        <p style="width: 15%;">商品名称</p>
        <p style="width: 20%;">编号</p>
        <p style="width: 20%;">
          时间
          <img id="Time" src="@/assets/index/time.png" alt="" @click="chenkTime()">
        </p>
        <p style="width: 15%;">数量</p>
        <p style="width: 15%;">状态</p>
        <p style="width: 15%;">行为</p>
        <p style="width: 15%;">操作人</p>
      </div>
      <div v-for="(item, index) in list" :key="item.id" class="main_center">
        <p style="width: 15%;" @click="location(item.goods_name)">
          <span class="main_center_index">{{ index + 1 }}</span>
          {{ item.goods_name }}
        </p>
        <p style="width: 20%;" @click="idLocation(item.id)">{{ item.order_pid }}</p>
        <p style="width: 20%;">{{ item.created_at }}</p>
        <p style="width: 15%;">{{ item._num }}</p>
        <p style="width: 15%;">成功</p>
        <p style="width: 15%;">{{ item.order_type_text }}</p>
        <p style="width: 15%;">{{ item.operator_name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getFlowSheet } from '@/api/index'
export default {
  name: 'Pdf',
  props: ['list'],
  data() {
    return {
      title: '最新流水单',
      ifTime: 1
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    idLocation(id) {
      this.$router.push({
        path: 'stock/inventoryOperationRecord',
        query: {
          id: id
        }
      })
    },
    location(goods_name) {
      this.$router.push({
        path: 'product/product',
        query: {
          goods_name
        }
      })
    },
    handleMouseOver() {
      this.roateImg()
    },
    roateImg() {
      var top_img = document.getElementById('top_img')
      top_img.style.animation = 'rotate 1s linear'
      top_img.addEventListener('animationend', function() {
        top_img.style.animation = ''
      })
    },
    chenkTime() {
      this.list.reverse()
      var Time = document.getElementById('Time')
      if (this.ifTime === 1) {
        this.ifTime = 2
        Time.style.transform = 'rotate(180deg)'
      } else {
        this.ifTime = 1
        Time.style.transform = 'rotate(0deg)'
      }
    },
    newList() {
      getFlowSheet().then(response => {
        if (response.code === 10000) {
          this.listCopy = response.data
        }
        this.$emit('list-updated', this.listCopy)
        this.$message({
          message: '刷新成功',
          type: 'success'
        })
        this.roateImg()
        this.ifTime = 1
        var Time = document.getElementById('Time')
        Time.style.transform = 'rotate(0deg)'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.FlowSheet {
  width: 96.5%;
  margin-left: 24px;
  height: 654px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 28px;
    padding-top: 22px;

    .top_title {
      position: relative;
      line-height: 28px;
      color: rgba(0, 34, 66, 1);
      font-size: 20px;
      left: 20px;
    }

    .top_img {
      width: 16px;
      height: 16.39px;
      position: relative;
      right: 20px;
    }
  }

  .main {
    width: 98%;
    margin-left: 20px;
    margin-top: 26px;

    .main_top {
      height: 48px;
      border-radius: 4px;
      background: rgba(248, 250, 251, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: rgba(51, 51, 51, 1);

      p {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        position: relative;
        img {
          width: 15px;
          height: 18px;
          position: absolute;
        }
      }
    }

    .main_center {
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      margin-top: 10px;

      p {
        text-align: center;
        position: relative;
        font-size: 14px;

        .main_center_index {
          width: 16px;
          height: 16px;
          position: absolute;
          left: 10%;
          border-radius: 2px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(24, 144, 255, 1);
          color: rgba(24, 144, 255, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
        }
      }
    }
  }
}</style>
